<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('调入页面')" />
	<th:block th:include="include :: list-css" />
    <style type="text/css">
    .layui-table-tool {min-height: 42px;padding: 6px 6px;background-color: #F2F2F2 !important;}
	.layui-table-tool-self {top: 3px;}
	.layui-elem-quote{padding:5px;background: #FFFFFF;font-weight: 500;}
	.layui-elem-quote::before{background-color:#FFF}
	.layui-table-view{margin-left:30px}
	.upThis{margin-top: 10px;}
	.upThis-css{position:absolute;z-index:999;top:0;width:100%}
	.mid-content{padding: 0px 0px 0px 6px;overflow-y: auto;}
</style>
</head>
<body>
<div class="main-content">
	<div class="content-right">
		<div class="search-top">
			<span>查询条件</span>
			<a href="javascript:;" layadmin-event="flexible" class="menuBtn">
				<i class="layui-icon layui-icon-spread-left" id="LAY_app_flexible" style="color: #fff;"></i>
			</a>
		</div>
		<div class="panel layout-expand layui-expand-east">
		    <div class="panel-header">
		        <div class="panel-tool" style="text-align: center; width: 26px;height: 30px;line-height: 30px;">
		            <a href="javascript:;" layadmin-event="flexible" class="menuBtn">
		                <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible" style="color: #fff;"></i>
		            </a>
		        </div>
		    </div>
		    <div class="panel-body panel-title" style="text-align: center; width: 26px;">查<br>询<br>条<br>件</div>
		</div>
       	<form class="layui-form">
			<th:block th:include="listinclude :: searchRight('pagecallin')" />
		</form>
   	</div>
	<div class="mid-content">
		<div class="layui-col-md12">
			<blockquote class="layui-elem-quote" style="padding: 0px 0px 0px 6px;">
				<div style="position: absolute;top:50%;margin-top:-21px;writing-mode: tb-rl;">待选区</div>
				<table class="layui-inline layui-hide" id="dhtable" lay-filter="ftable"></table>
			</blockquote>
		</div>
		<div class="layui-col-md12 upThis">
			<blockquote class="layui-elem-quote" style="padding: 0px 0px 0px 6px;">
				<div style="position: absolute;top:50%;margin-top:-21px;writing-mode: tb-rl;">已选区</div>
				<table class="layui-inline layui-hide" id="dhtable2" lay-filter="ftable2"></table>
			</blockquote>
		</div>
	</div>
</div>
<script type="text/html" id="toolbar">
<div class="layui-btn-container">
	<div class="layui-btn addbtn {{ tb1s?'':'layui-btn-disabled' }} layui-table-tools" lay-event="add">
		<i class="dhicon dh-angle-double-down"></i> 添加
	</div>
	<div class="layui-btn delbtn {{ tb2s?'':'layui-btn-disabled' }} layui-table-tools layui-btn-danger" lay-event="del">
		<i class="dhicon dh-angle-double-up"></i> 移除
	</div>
</div>
</script>
<th:block th:include="include :: footer" />
<th:block th:include="include :: searchJS" />
<script th:src="@{/dhecp/js/dh-business.js?v=1}"></script>
<th:block th:include="listinclude :: list-templeat" />
<script th:inline="javascript">
	/*<![CDATA[*/
	var prefix = ctx + "business/product";
	var gridColumns=[[${gridColumns}]];
	var foldRelation=[[${foldRelation}]];
	var dataUrl=ctx +[[${dataUrl}]];
	var moduleTable=[[${moduleTable}]];
	var moduleTableEntity=[[${moduleTableEntity}]]?[[${moduleTableEntity}]]:moduleTable;
	var uparam = [[${param}]];//url中的参数
	$.each(uparam,function(i,v){
		if(i != 'relationguid')dataUrl += '&'+i+'='+v[0];
	})
	/*]]>*/
</script>
<script type="text/javascript">
var $,layer,table,form,laydate,tb1s=false,tb2s=false,wherestr={},dataStr = [];
layui.use(['table','layer','jquery','laydate','form'], function () {
    $ = layui.$,layer = layui.layer,table = layui.table,laydate=layui.laydate,form = layui.form;
   	serachRender();//查询条件初始渲染集合
    $.tablelist.init({
        elem: '#dhtable'
        ,url: dataUrl
        ,where: getWherestr()
        ,sort:true
        ,cols: [gridColumns.gridBody
        ]
        ,height:'full-270'
    });
    $.tablelist.init({
        elem: '#dhtable2'
		,toolbar:'#toolbar'
		,defaultToolbar: [{title:'展开',layEvent:'tableUp',icon:'layui-icon-screen-full'}]
        ,cols: [gridColumns.gridBody]
    	,data: dataStr
        ,height:'255'
       	,done:function(res, curr, count){
  			fixTotal(this);//修复合计行固定列问题
       	}
    });
	//点击table行选中复选框
	$(document).on('click', '.layui-table-view tbody tr', function(event) {
		var elemTemp = $(this);
		var tableView = elemTemp.closest('.layui-table-view');
		var trIndex = elemTemp.data('index');
		tableView.find('tr[data-index="' + trIndex + '"]').find('[name="layTableCheckbox"]+').last().click();
	});

	
	//点击复选框阻止冒泡,改变按钮样式
    $(document).on("click",".layui-form-checkbox",function(e){
       	e.stopPropagation();
        var checkStatus = table.checkStatus('dhtable');
        var checkStatus2 = table.checkStatus('dhtable2');
        var data = checkStatus.data, 
        	data2 = checkStatus2.data;
        if(data.length > 0){
        	tb1s=true;
        	$(".addbtn").removeClass("layui-btn-disabled");
        }else{
        	tb1s=false;
        	$(".addbtn").addClass("layui-btn-disabled");
        }
        if(data2.length > 0){
        	tb2s=true;
        	$(".delbtn").removeClass("layui-btn-disabled");
        }else{
        	tb2s=false;
        	$(".delbtn").addClass("layui-btn-disabled");
        }
        
    });
	//监听排序事件 
    table.on('sort(ftable)', function(obj){
    	$.tablelist.sort('dhtable',obj);
    });
	//双击添加表一
	table.on('rowDouble(ftable)', function(obj){
		var data = [obj.data];
		$.each(data,function(i,v){
	    	var flag = false;
	    	for(var j=0; j < dataStr.length; j++){
	    		if(v.guid == dataStr[j].guid)flag = true;			
	    	}
	    	if(!flag)dataStr.push(v);	//排除已选中
	    });
		table.reload('dhtable2',{totalRow:dataStr.length?gridColumns.totalRow:false,data:dataStr});
	    $('.layui-table-body').find('.layui-form-checked').click();
	    $('.laytable-cell-checkbox').find('.layui-form-checked').click();
	    $(".addbtn").addClass("layui-btn-disabled");
	    tb1s=false;
	})
	//双击删除表二
	table.on('rowDouble(ftable2)', function(obj){
		var data = [obj.data];
		$.each(data,function(i,v){
			for(var j=0; j < dataStr.length; j++){
				if(v.guid == dataStr[j].guid)dataStr.splice(j,1);
			}
		});
		table.reload('dhtable2',{totalRow:dataStr.length?gridColumns.totalRow:false,data:dataStr});
		$(".delbtn").addClass("layui-btn-disabled");
	    tb2s=false;
	})
	//头部event事件
	table.on('toolbar(ftable2)', function(obj){
	    switch(obj.event){
	    	case 'add'://添加
	    		var checkStatus = table.checkStatus('dhtable'),data = [];
	    	    data = checkStatus.data;
	    	   	$.each(data,function(i,v){
	    	   		var flag = false;
	    	   		for(var j=0; j < dataStr.length; j++){
	    				if(v.guid == dataStr[j].guid)flag = true;			
	    			}
	    	   		if(!flag)dataStr.push(v);	//排除已选中
	    	   	});
	    	   	table.reload('dhtable2',{totalRow:dataStr.length?gridColumns.totalRow:false,data:dataStr});
	    	   	$('.layui-table-body').find('.layui-form-checked').click();
	    	   	$('.laytable-cell-checkbox').find('.layui-form-checked').click();
	    	   	$(".addbtn").addClass("layui-btn-disabled");
	        	tb1s=false;
	    	break;
	    	case 'del'://移除
	    		var checkStatus = table.checkStatus('dhtable2'),data = [];
		    	data = checkStatus.data;
		    	$.each(data,function(i,v){
		    		for(var j=0; j < dataStr.length; j++){
		    			if(v.guid == dataStr[j].guid)dataStr.splice(j,1);
		    		}
		    	});
		    	table.reload('dhtable2',{totalRow:dataStr.length?gridColumns.totalRow:false,data:dataStr});
		    	$(".delbtn").addClass("layui-btn-disabled");
	        	tb2s=false;
	    	break;
	    	case 'tableUp'://已选区展开
	    		table.reload('dhtable2',{defaultToolbar: [{title:'收缩',layEvent:'tableDown',icon:'layui-icon-screen-restore'}],height:$(window).height()});
	    		$('.upThis').addClass('upThis-css');//添加绝对定位样式
         	break;
	    	case 'tableDown'://已选区收缩
	    		table.reload('dhtable2',{defaultToolbar: [{title:'展开',layEvent:'tableUp',icon:'layui-icon-screen-full'}],height:'260'});
	    		$('.upThis').removeClass('upThis-css');//移除样式
	    	break;
	    }
	});
});

var callbackdata = function () {
	foldRelation['dataStr']=dataStr;
    return foldRelation;
}
</script>
</body>
</html>